<template>
  <div>
    <div class="video-list-container">
      <!-- 视频渲染 -->
      <div @touchmove="handleScroll" style="position: absolute; z-index:100; opacity:0; width:100vw;height:100vh;">
      </div>
      <video v-if="flag" width="100%" height="100%" controls loop autoplay>
        <source :src="src" type="video/mp4" />
       </video>
       <video v-if="!flag" width="100%" height="100%" controls loop autoplay>
        <source :src="src" type="video/mp4" />
       </video>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {useCounterStore} from '../xiaopage/stores/counter'
const counterStore = useCounterStore()
const aa:any = ref([])
const src = ref("")
const flag=ref(false)
onMounted(()=>{
   for (let j = 1; j < counterStore.$state.items.length; j++) {
    for(let k = 1; k < counterStore.$state.items[j].children.length; k++) {
      aa.value.push(counterStore.$state.items[j].children[k].text) 
  }
}
src.value = aa.value[0]
})
const route = useRoute()
const item = route.query
const num = ref(0)
console.log(item.text)
const items = ref(item.text)
// const dian = ref(false)
import _ from 'lodash';
const router = useRouter()
// 记录滚动容器的当前滚动位置
const scrollPosition = ref<number>(0);
const handleScroll = _.debounce(() => {
  num.value +=1 
// dian.value = true
flag.value=!flag.value
src.value = aa.value[num.value]
console.log(src.value,"55555");
console.log(num.value)
},100)
</script>
<style>
.video-list-container {
  height: 100vh;
  
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

</style>
